<template>
  <view class="body">
    <view class="header member-top">
      <view class="header-top hide">
        <image
            :src="plantformInfo.site_pc_logo || 'https://www.suteshop.com/site/static/src/default/images/landing/bbc.jpg'"></image>
      </view>
      <view class="header-bottom">
        <text>{{ plantformInfo.site_name }}</text>
      </view>
      <view class="logo">
        <image :src="plantformInfo.site_mobile_logo"></image>
      </view>
    </view>
    <view style="padding: 10px;">
      <view class="introduce">
        <!--<view class="title">店铺介绍</view>-->
        <view class="text">{{ plantformInfo.site_meta_description || "" }}</view>
      </view>
      <view class="message">
        <view class="peoplename aboutUs">
          <view>{{ __('公司名称') }}：</view>
          <label>{{ plantformInfo.site_company_name }}</label>
        </view>
        <view class="tel aboutUs" bindtap="call">
          <view>{{ __('联系方式') }}：</view>
          <image src="https://static.shopsuite.cn/xcxfile/appicon/images/call.png"
                 style="width:30rpx;height:30rpx;margin-right:10rpx"></image>
          <label
              style="color:#17abe3">{{ plantformInfo.site_tel }}</label>
        </view>
        <view class="address aboutUs">
          <view>{{ __('公司地址') }}：</view>
          <label>{{ plantformInfo.site_address }}</label>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
import {mapMutations, mapState} from 'vuex';

export default {
  data() {
    return {};
  },
  computed: mapState([
    'Config',
    'StateCode',
    'notice',
    'plantformInfo',
    'shopInfo',
    'userInfo',
    'hasLogin'
  ]),
  async onLoad(options) {
    await this.$onLaunched;
    let that = this;

    uni.setNavigationBarTitle({
      title: this.__('关于我们')
    });

    this.getPlantformInfo(function (plantformInfo) {
    });
  },
  onNavigationBarButtonTap(e) {
    var that = this;

    if (e.index === 0) {
      that.onShareBox();
      /*
  that.setData({
    shareBoxFlag: 1,
    shareContetnFlag: 1
  })
  */
    } else {
      uni.showToast({
        title: '你点了收藏按钮',
        icon: 'none'
      });
    }
  },
  methods: {
    ...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
    call: function () {
      this.$.makePhoneCall({
        phoneNumber: this.data.plantformInfo.LegalNumber
      });
    }
  }
};
</script>

<style lang="scss">
@import '../../styles/_variables.scss';

.body {
  background: #f8f8f8;
}

.header {
  width: 100%;
  height: 400rpx;
  background: #ffffff;
  border-bottom: 2rpx solid #d9d9d9;
}

.header-top {
  width: 100%;
  height: 250rpx;
}

.header-top image {
  width: 100%;
  height: 250rpx;
}

.header-bottom {
  height: 150rpx;
  display: flex;
  justify-content: center;
  font-size: 32rpx;
  color: #000;
}

.header-bottom text {
  margin-top: 90rpx;
}

.logo {
  width: 150rpx;
  height: 150rpx;
  position: absolute;
  top: 180rpx;
  left: 300rpx;
}

.logo image {
  width: 100%;
  height: 150rpx;
}

.introduce {
  background: #ffffff;
  margin-top: 30rpx;
  padding: 20rpx;
}

.introduce .title {
  font-size: 28rpx;
  color: #000;
}

.introduce .text {
  font-size: 28rpx;
  color: #717171;
  margin-top: 10rpx;
}

.message {
  background: #ffffff;
  padding: 20rpx 20rpx 0 20rpx;
  margin-top: 30rpx;
}

.message .title {
  padding-bottom: 20rpx;
  font-size: 28rpx;
  color: #000;
}

.message .aboutUs {
  font-size: 28rpx;
  padding: 20rpx 0;
  color: #333;
  display: flex;
}

.message .aboutUs view {
  width: 160rpx;
}

.message .aboutUs label {
  color: #717171;
  flex:1;
}


.member-top {
  -webkit-animation: changeBg 20s infinite;
  animation: changeBg 20s infinite;
  background-color: #ff6700;
  background-image: url('');
  background-size: cover;
  text-align: center;
  width: 100%;
  /*height: 11rem;*/

  overflow: hidden;
  height: 400rpx; /* 320 */

  color: #fff;
  position: relative;
  z-index: 1;
}

@-webkit-keyframes changeBg {
  0% {
    background-color: #ff6700;
  }

  90% {
    background-color: #ff6700;
  }

  10% {
    background-color: #fb6e52;
  }

  20% {
    background-color: #ffce55;
  }

  30% {
    background-color: #a0d468;
  }

  40% {
    background-color: #48cfae;
  }

  50% {
    background-color: #4fc0e8;
  }

  60% {
    background-color: #5d9cec;
  }

  70% {
    background-color: #ac92ed;
  }

  80% {
    background-color: #ec87bf;
  }
}

@keyframes changeBg {
  0% {
    background-color: #ff6700;
  }

  90% {
    background-color: #ff6700;
  }

  10% {
    background-color: #fb6e52;
  }

  20% {
    background-color: #ffce55;
  }

  30% {
    background-color: #a0d468;
  }

  40% {
    background-color: #48cfae;
  }

  50% {
    background-color: #4fc0e8;
  }

  60% {
    background-color: #5d9cec;
  }

  70% {
    background-color: #ac92ed;
  }

  80% {
    background-color: #ec87bf;
  }
}

</style>
